<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单事件</title>
		<script>
			function submitFun(event) {
				event.preventDefault()
				console.log('自定义提交')
			}
		</script>
	</head>
	<body>
		<!-- 表单中的输入框，会默认监听enter的按键事件，执行submit -->
		<form onsubmit="submitFun(event)" 
		onreset="console.log('数据清空')">
			用户名：
			<input onfocus="console.log('获取焦点')"
				onblur="console.log('失去焦点')"
				type="text" name="username"/>
			<br />
			密码：
			<!-- change事件：在失去焦点的基础上，与原本的内容发生变化 -->
			<input oninput="console.log('在输入了')"
			onchange="console.log('内容发生变化了')"
			type="text" name="password"/>
			<br />
			选项：
			<!-- 监听选项切换使用change事件 -->
			<select name="opt" onchange="console.log('选项切换了')">
				<option value="1">选项1</option>
				<option value="2">选项2</option>
			</select>
			<br />
			<!-- 点击重置按钮，实际上在触发form元素的reset事件 -->
			<input type="reset"/>
			<!-- 点击提交按钮，实际上在触发form元素的submit事件 -->
			<input type="submit"/>
		</form>
	</body>
</html>